<template>
	<view class="search-hot-list-container">
		<!-- 标题 -->
		<view class="search-hot-title">慕课热搜 - 全网技术 一网打尽</view>
		<view class="card-hot-item">
		    <block v-for="(item, index) in hotList" :key="index">
			  <view class="search-hot-item" @click="onItemClick(item)">
			    <!-- 序号 -->
			    <hot-ranking :ranking="index + 1"></hot-ranking>
			    <!-- 文本 -->
			    <text class="title line-clamp">{{ item.label }}</text>
			    <!-- hot-icon -->
			    <image v-if="index <= 2" class="search-hot-icon" src="/static/images/hot-icon.png" />
			  </view>
		    </block>
			</view>
	</view>
</template>

<script>
import { _getSearchHotList } from '../../api/search.js'
	export default {
		name:"search-hot-list",
		data() {
			return {
				hotList:[] // 热搜列表
			};
		},
		created(){
			this.getSearchHotList()
		},
		methods:{
			/**
			 * 获取热搜列表数据
			 * */
			async getSearchHotList(){
				const {list} = await _getSearchHotList()
				this.hotList = list
				console.log(this.hotList)
			},
			/**
			 * item的点击事件传label给父组件修改输入框中的内容
			 * */
			 onItemClick(item){
				 this.$emit('onSearch',item.label)
				 
			 }
		}
	}
</script>

<style lang="scss" scoped>
.search-hot-list-container {
    padding: 20px 20px;
  .search-hot-title {
    font-weight: bold;
    font-size: $uni-font-size-base;
    color: $uni-text-color-hot;
    padding: 0 12px $uni-spacing-col-lg 12px;
    margin: 0 -12px $uni-spacing-col-lg -12px;
    box-shadow: 0px 1px 7px 0px rgba(143, 143, 143, 0.1);
  }
  .card-hot-item{
	  padding: 0 12px $uni-spacing-col-lg 12px;
	  margin: 0 -12px $uni-spacing-col-lg -12px;
	  box-shadow: 0px 4px 29px 3px rgba(143, 143, 143, 0.1);
  }
  .search-hot-item {
    display: flex;
    align-items: center;
    padding: $uni-spacing-col-lg 0;

    .title {
      color: $uni-text-color;
      font-size: $uni-font-size-base;
      margin: 0 $uni-spacing-row-base;
    }
    .search-hot-icon {
      width: 14px;
      height: 14px;
    }
  }
}
</style>

